<template>
  <div class="mine-box">
    <van-row class="user-box">
      <van-col class="user-box-left" span="12">
        <div class="user-box-img">
          <img :src="userImg" alt="">
        </div>
        <div class="user-box-name">
          这里是用户昵称
        </div>
      </van-col>
      <van-col class="user-box-right" span="8" offset="4">
        级别：1级
      </van-col>
    </van-row>
    <van-cell-group>
      <van-cell title="个人信息" is-link @click="jumpTo('/personal-info')"/>
      <van-cell title="我的钱包" is-link @click="jumpTo('/wallet')"/>
      <van-cell title="收支明细" is-link @click="jumpTo('/income')"/>
      <van-cell title="账户安全" is-link @click="jumpTo('/security')"/>
      <van-cell title="系统信息" is-link @click="jumpTo('/system-info')"/>
    </van-cell-group>

    <div class="login-out">
      <van-button size="large" class="login-out-btn">
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    Icon
  } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
    },
    data() {
      return {
        userImg: '../../../static/img/login.png'
      }
    },
    mounted() {
      // 进入该页面 修改父页面的index
      this.$parent.activeIndex = 3;

    },
    methods: {
      jumpTo(url) {
        this.$router.push(url);
      }
    }
  }
</script>

<style scoped="scoped">
.mine-box {
  position: relative;
  height: calc(100% - 50px);
  background-color: #E8E8E8;
  margin-bottom: 50px;
}
.user-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% - 80px);
  height: 100px;
  padding: 20px 40px;
  margin-bottom: 10px;
  background-color: #fff;
}
.user-box-left {
  text-align: center;
}
.user-box-right {
  line-height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
}
.user-box-left .user-box-img {
  margin-bottom: 5px;
}
.user-box-left .user-box-img img {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user-box-name {
  line-height: 23px;
  color: rgba(16, 16, 16, 1);
  font-size: 16px;
  text-align: center;
}
.login-out {
  position: absolute;
  bottom: 20px;
  width: calc(100% - 20px);
  padding: 0 10px;
  font-size: 14px;
}
.login-out-btn {
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
}
</style>